<template>
	<view class="ys">
		<view class="swiper">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="info.images" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="infobox">

			<!-- 	<view class="tipslist">
				<view class="tips">
					<view class="tips-title">
						3室2厅
					</view>
					<view class="tips-text">
						整租
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						92m²
					</view>
					<view class="tips-text">
						建筑面积
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						南
					</view>
					<view class="tips-text">
						朝向
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						中/14层
					</view>
					<view class="tips-text">
						楼层
					</view>
				</view>
			</view> -->
			<view class="map">
				<image src="/static/img/map.png" mode="widthFix"></image>
				<view class="address">
					<view class="address-title">
						{{info.houseName}}
					</view>
					<view class="address-detail">
						{{info.houseStandardAddress}}
					</view>
				</view>
			</view>
			<view class="name">
				<text class="bold">房东姓名：</text>
				<text>{{info.ownerName}}</text>
			</view>
			<view class="name">
				<text class="bold">联系方式：</text>
				<text>{{info.ownerMobile}}</text>
			</view>
			<view class="name">
				<text class="bold">详细地址：</text>
				<text>{{info.houseAddress}}</text>
			</view>
		</view>
		<view class="searchbox">
			<view class="search">
				<input type="text" placeholder="请输入房间名称" v-model="searchText" @confirm="search" />
				<uni-icons type="search" color="#777" size="20" @click="search"></uni-icons>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="toPage(`/pages/room/detail?houseId=${id}&roomId=${item.roomId}`)">
				<view class="infobox">
					<view class="name">
						{{item.roomName}} {{item.roomNumber}}
						<text class="status on" v-if="item.roomStatus == '00'">待出租</text>
						<text class="status on" v-else-if="item.roomStatus == '11'">已出租</text>
					</view>
					<view class="info">
						<view class="left">
							<view class="sizebox">
								<view class="long">
									租赁期限：{{item.leaseTerm}}
								</view>
							</view>
							<view class="sizebox">
								<view class="long">
									房间设施：{{item.roomFacilities}}
								</view>
							</view>
							<view class="sizebox">
								<view class="size">
									面积：{{item.roomArea}}
								</view>
								<view class="long">
									安全设施：{{item.safetyFacilities}}
								</view>
							</view>
							<view class="pricebox">
								<!-- <text class="tips">限时特惠</text> -->
								<view class="num">
									￥<text>{{item.rent}}</text> /月
								</view>
							</view>
						</view>
						<view class="right" v-if="item.roomStatus == '11'">
							<button @click.stop="surrender(item)">退租</button>
						</view>
					</view>
				</view>
			</view>
			<view class="no-list" v-if="list.length==0">
				- 还没有房间 -
			</view>
		</view>

		<view class="addbtn" @click="toPage(`/pages/landlord/addroom?id=${id}`)">
			<uni-icons type="plusempty" color="#fff"></uni-icons>
			添加房间
		</view>
	</view>
</template>

<script>
	import {
		houselist,
		roomlist,
		housedetail,
		surrender,
		detail
	} from "@/api/owner.js"
	export default {
		data() {
			return {
				searchText: '',
				list: [],
				id: '',
				page: 1,
				last_page: 1,
				info: []
			}
		},
		onLoad(e) {
			if (e.id) this.id = e.id
			this.houselist()
			this.roomlist()
			this.detail()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.roomlist()
			}
		},
		methods: {
			detail() {
				detail({
					houseId: this.id
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			clear() {
				this.last_page = 1
				this.page = 1
				this.list = []
				this.roomlist()
			},
			houselist() {
				houselist({
					houseName: this.id,
					pageNum: 1,
					pageSize: 1
				}).then(res => {

				})
			},
			surrender(item) {
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '该房间是否退租',
					success(res) {
						if (res.confirm) {
							surrender({
								houseRoomId: item.roomId
							}).then(res => {
								uni.$showMsg(res.msg)
								that.clear()
							})
						}
					}
				})

			},
			search() {
				this.page = 1
				this.last_page = 1
				this.list = []
				this.roomlist()
			},
			roomlist() {
				roomlist({
					houseId: this.id,
					pageNum: this.page,
					pageSize: 10,
					roomName: this.searchText
				}).then(res => {
					if (res.code == 200) {
						this.list = this.list.concat(res.data.records)
						this.last_page = res.data.pages
					}
				})
			},
			screen2Sure() { //合作金额进行筛选
				this.is_screen = false
				this.screenId = ''
				if (!this.screen_2[0].check) {
					this.screenList[1].check = true
				} else {
					this.screenList[1].check = false
				}
			},
			resetting() { //重置
				this.screen_2.forEach(item => {
					item.check = false
				})
				this.screen_2[0].check = true
			},
			changeItem3(item) { // 第三排序
				this.screen_3_id = item.id
				this.is_screen = false
				this.screenId = ''
				if (item.id != 1) {
					this.screenList[2].check = true
				} else {
					this.screenList[2].check = false
				}
			},
			changeItem2(scr) { //合作金额选择
				if (scr.id == 1) {
					this.screen_2.forEach(item => {
						item.check = false
					})
					scr.check = true
				} else {
					this.screen_2[0].check = false
					scr.check = !scr.check
				}

			},
			changeItem1(i, item) { //项目行业选择
				this.screen_1_id = i
				if (i != 0) {
					this.screenList[0].check = true
					this.screenList[0].text = item
				} else {
					this.screenList[0].check = false
					this.screenList[0].text = '区域'
				}
				this.is_screen = false
				this.screenId = ''
			},
			changeScreen(item) { //切换筛选分类
				if (this.screenId == item.id) {
					this.screenId = ''
					this.style1 = ''
					this.is_screen = false
				} else {
					this.is_screen = true
					this.screenId = item.id
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.swiper {
		swiper {
			height: 50vh;

			.swiper-item {
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.infobox {
		background: #fff;
		border-top-right-radius: 12px;
		border-top-left-radius: 12px;
		margin-top: -20px;
		position: relative;
		z-index: 20;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 10px;

		.name {
			display: flex;
			align-items: center;
			font-size: 14px;
			margin-top: 5px;

			.bold {
				font-weight: bold;
			}
		}

		.map {
			margin-top: 15px;
			height: 120px;
			overflow: hidden;
			border-radius: 8px;
			position: relative;
			margin-bottom: 10px;

			image {
				width: 100%;
				opacity: .8;
			}

			.address {
				position: absolute;
				top: 20%;
				left: 20px;
				width: 80%;

				.address-title {
					font-weight: bold;
					margin-bottom: 15px;
				}

				.address-detail {
					width: 80%;
					font-size: 13px;
					color: #777;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				button {
					font-size: 14px;
					width: 52px;
					margin: 0;
					background: #f00;
					color: #fff;
					height: 25px;
					line-height: 25px;
					padding: 0;
				}
			}
		}

		.price {
			color: #FC7941;

			text {
				font-size: 28px;
				margin-right: 3px;
			}
		}

		.tipslist {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			.tips {
				display: flex;
				flex-direction: column;

				.tips-title {
					font-weight: bold;
				}

				.tips-text {
					font-size: 13px;
					color: #777;
					margin-top: 2px;
				}
			}
		}
	}

	.addbtn {
		position: fixed;
		z-index: 9999;
		bottom: 10px;
		width: 40%;
		left: 50%;
		transform: translate(-50%);
		background: #FC7941;
		color: #fff;
		border-radius: 25px;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
	}

	.searchbox {
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		background: #fff;
		padding: 5px 10px;
		margin-bottom: 10px;
		z-index: 20;

		.search {
			background: #f2f2f2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 8px;

			input {
				font-size: 14px;
				padding: 8px;
				flex: 1;
				padding-right: 10px;
			}
		}
	}

	.list {
		padding: 10px;

		.no-list {
			padding-bottom: 60px;
		}

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			background: rgba(249, 250, 253, 1);
			padding: 10px 5px;
			border-radius: 5px;
			position: relative;
			z-index: 0;

			.imgbox {
				width: 35%;
				height: 90px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.infobox {
				width: 100%;
				padding-left: 10px;
				box-sizing: border-box;

				.name {
					font-weight: bold;
					font-size: 17px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 12px;
						color: #777;
						background: #ddd;
						padding: 4px 8px;
						font-weight: normal;
						border-radius: 4px;

						&.on {
							color: #fff;
							background: #FC7941;
						}
					}


				}

				.sizebox {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #ADADAD;
					margin-top: 10px;

					.size {
						padding-right: 10px;
						border-right: 1px solid #ADADAD;
						margin-right: 8px;
					}
				}

				.pricebox {
					display: flex;
					align-items: center;
					margin-top: 10px;
					color: #FC7941;

					.tips {
						background: #FC7941;
						color: #fff;
						font-size: 13px;
						padding: 4px 8px;
						border-radius: 5px;
						margin-right: 8px;
					}

					.num {
						font-size: 14px;

						text {
							font-size: 18px;
							font-weight: bold;
							margin-right: 2px;
						}
					}
				}
			}
		}
	}

	.top {
		height: 120px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 99;
		line-height: 120px;

		.left {
			position: absolute;
			left: 5%;
			top: 50%;
			transform: translate(0, -50%);
			height: 50px;
			display: flex;
			align-items: center;
			width: 100%;

			.inputbox {
				background: #f5f5f5;
				width: 70%;
				height: 35px;
				display: flex;
				align-items: center;
				border-radius: 20px;
				font-size: 14px;
				padding: 0 10px;

				text {
					margin-right: 10upx;
				}

				input {
					font-size: 15px;
					letter-spacing: 1px;
				}

				.input_place {
					color: #bbb;
				}
			}
		}
	}

	.place {
		height: 120px;
	}



	.tasklist {
		padding: 0 5%;
		position: relative;

		&::before {
			position: absolute;
			content: '';
			background: #00000000;
		}

		&.mc::before {
			position: absolute;
			content: '';
			background: #00000050;
			z-index: 9;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			transition: .5s;
		}

		.taskitem {
			padding: 10px 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: 0;
			}

			.title {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					width: 70%;

					.name {
						width: 70%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.tabs {
						font-size: 11px;
						color: #3072F6;
						background: #3072F622;
						padding: 1px 3px;
					}
				}

				.right {
					border: 1px solid #3072F6;
					color: #3072F6;
					border-radius: 20px;
					padding: 3px 8px;
					font-size: 14px;
					font-weight: bold;

					text {
						margin: 1px;
					}
				}
			}

			.describe {
				margin-top: 5px;
				font-size: 14px;
				color: #333;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.tips {
				font-size: 13px;
				color: #999;
				margin-top: 5px;
			}

			.imgbox {
				margin-top: 5px;

				image {
					border-radius: 3px;
				}
			}
		}
	}

	.screenbox {
		display: flex;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		width: 100%;
		background: #fff;
		z-index: 99;
		height: 40px;


		.screenitem {
			flex: 1;
			text-align: center;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;


			&.active {
				color: #3072F6;
			}

			.icon_up::after {
				position: relative;
				content: '▲';
				color: #3072F6;
				font-size: 12px;
				vertical-align: top;
				display: block;
				transform: scale(0.8);
			}

			.icon_down::after {
				position: relative;
				content: '▼';
				font-size: 12px;
				display: block;
				transform: scale(0.8);
			}
		}
	}

	.bg {
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		padding: 10px 5%;
		display: flex;
		flex-wrap: wrap;

		.item_1 {
			background: #F4F5FA;
			width: 31.3333%;
			margin: 5px 1%;
			padding: 0 5px;
			box-sizing: border-box;
			font-size: 14px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

			&.active {
				color: #3072F6;
				background: #3072F625;
			}
		}
	}

	.screen_2 {

		.screen_2_foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			margin-top: -2px;
			padding: 0 6%;
			border-bottom-right-radius: 8px;
			border-bottom-left-radius: 8px;
			padding-bottom: 5px;

			.left {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				font-size: 12px;

				i {
					font-size: 22px;
					margin-bottom: 3px;
				}
			}

			.right {
				width: 85%;

				button {
					width: 100%;
					background: #3072F6;
					color: #fff;
					font-size: 17px;
				}
			}
		}
	}

	.screen_main {
		width: 100%;
		position: fixed;
		top: 80px;
		z-index: -1;
		transform: translate(0, -100%);
		overflow: hidden;
		transition: .3s;

		&.screen_3 {
			.bg {
				flex-direction: column;

				.item_3 {
					height: 44px;
					line-height: 44px;
					font-size: 15px;
					display: flex;
					justify-content: space-between;

					&.active {
						color: #3072F6;
					}
				}
			}
		}
	}

	.show_screen {
		transform: translate(0);
		z-index: 99
	}
</style>